<template>
		<om-addpage :menuName="menuName" :busCode="busCode" @formSubmit='formSubmit'>
			<view v-show="false">
				<input v-model="formdata.userinfoId" name="userinfoId" />
				<input v-model="formdata.addressId" name="addressId" />
				<input v-model="formdata.addressName" name="addressName" />
				<input v-model="formdata.street" name="street" />
				<input v-model="formdata.startTime" name="startTime" />
				<input v-model="formdata.endTime" name="endTime" />
				<input v-model="formdata.vehicleCode" name="vehicleCode" />
				<input v-model="formdata.vehicleName" name="vehicleName" />
				<input v-model="formdata.reason" name="reason" />
			</view>
			<uni-list title="公出信息">
				<uni-list-item :showArrow="false">
					<view class="tui-flex">
						<view class="tui-col-4">
							<om-label label="地点" required></om-label>
						</view>
						<view class="tui-right tui-col-8" @click="addressFunc">
							{{formdata.addressName || '请选择'}}
						</view>
					</view>
				</uni-list-item>
				<uni-list-item  :showArrow="false">
					<view class="tui-flex">
						<view class="tui-col-4">
							<om-label label="乡/镇/街道"></om-label>
						</view>
						<view class="tui-col-8">
							<input v-model="formdata.street" name="street" placeholder="请输入..."/>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item  :showArrow="false">
					<view class="tui-flex">
						<view class="tui-col-4">
							<om-label label="出发时间" required></om-label>
						</view>
						<view class="tui-center  tui-col-8">
							<picker mode="multiSelector" :value="dateTime" @change="changeDateTime" @columnchange="changeDateTimeColumn" :range="dateTimeArray">
								 <view class="tui-right">
									 {{getStartTime}}
								</view>
							</picker>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item  :showArrow="false">
					<view class="tui-flex">
						<view class="tui-col-4">
							<om-label label="结束时间" required></om-label>
						</view>
						<view class="tui-center  tui-col-8">
							<picker mode="multiSelector" :value="dateTime1" @change="changeDateTime1" @columnchange="changeDateTimeColumn1" :range="dateTimeArray1">
							  <view class="tui-right">
								  {{getEndTime}}
							  </view>
							</picker>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item  :showArrow="false">
					<view class="tui-flex">
						<view class="tui-col-4">
							<om-label label="出差时长"></om-label>
						</view>
						<view class="tui-right tui-col-8">
							<input v-model="workOfficeTime" disabled></input>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item  :showArrow="false">
					<view class="tui-flex">
						<view class="tui-col-4">
							<om-label label="交通工具" required></om-label>
						</view>
						<view class="tui-right tui-col-8">
							 <picker @change="vehicleFunc" :value="vehicleIndex" :range="vehicleNames">
								<view class="om-content">{{vehicleNames[vehicleIndex]}}</view>
							  </picker>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item  :showArrow="false">
					<view class="tui-flex">
						<view class="tui-col-4">
							<om-label label="公出事由" required></om-label>
						</view>
					<view class="tui-left tui-col-8">
						  <textarea class="om-textarea" :auto-height="true" v-model="formdata.reason" name="reason" placeholder="请输入..."/>
					</view>
					</view>
				</uni-list-item>
			</uni-list>
		</om-addpage>
</template>

<script>
	const form = require("../../../static/js/formValidation.js")
	import dateTimePicker from '@/static/js/dateTimePicker.js';
	import { ignoreHtml} from '@/static/js/common.js';
	import { mapState } from 'pinia';
	import {useLoginUserStore} from '@/stores/login-user.js';
	export default {
		provide() {
			return {
				formPage: this
			};
		},
		data() {
			return {
				formdata:{
					userinfoId:'',
					addressId:'',
					addressName:'',
					street:'',
					startTime:'',
					endTime:'',
					vehicleCode:'',
					vehicleName:'',
					reason:''
				},
				 //交通工具
				 vehicleIndex:0,
				    vehicleCodes: [],
				    vehicleNames: [],
				    //开始结束时间
				    date: '2018-10-01',
				    time: '12:00',
				    dateTime: "",
				    dateTimeArray: [],
				    dateTime1: "",
				    dateTimeArray1: [],
				    startYear: 2000,
				    endYear: 2050,
				    menuName: "",
					id:'',
					busCode:"",
					addressValue:"",
					workOfficeTime:""
			}
		},
		computed: {
			...mapState(useLoginUserStore, ['userId']),
			getStartTime(){
				if(this.dateTimeArray && this.dateTime){
					this.formdata.startTime =  dateTimePicker.formatterDate(this.dateTimeArray, this.dateTime);
					return this.formdata.startTime
				}else{
					return ''
				}
			},
			getEndTime(){
				if(this.dateTimeArray1 && this.dateTime1){
					this.formdata.endTime =  dateTimePicker.formatterDate(this.dateTimeArray1, this.dateTime1);
					return this.formdata.endTime
				}else{
					return ''
				}
			}
		},
		methods: {
			 addressFunc(e) {
			    uni.navigateTo({
			      url: '/pages/public/address/address',
			    })
			  },
			   /**
			     * 大于结束时间时自动更新结束时间
			     */
			    changeDateTime(e) {
			      let d1 = dateTimePicker.formatterDate(this.dateTimeArray, e.detail.value);
			      let d2 = dateTimePicker.formatterDate(this.dateTimeArray1, this.dateTime1);
			      this.dateTime = e.detail.value
			      this.workOfficeTime = dateTimePicker.timeDiff(d1, d2)
			      this.verifyStartTimeFunc(d1, d2)
			    },
			    /**
			     * 小于开始时间时自动更新开始时间
			     */
			    changeDateTime1(e) {
			      let d1 = dateTimePicker.formatterDate(this.dateTimeArray, this.dateTime);
			      let d2 = dateTimePicker.formatterDate(this.dateTimeArray1, e.detail.value);
			      this.dateTime1 = e.detail.value
			        this.workOfficeTime = dateTimePicker.timeDiff(d1, d2)
			      this.verifyStartTimeFunc(d1, d2)
			    },
			    /**
			     * 开始时间面板滑动方法
			     */
			    changeDateTimeColumn(e) {
			      if (e.detail.column == 1) {
			        let arr = this.dateTime
			         let dateArr = this.dateTimeArray
			        arr[e.detail.column] = e.detail.value;
			        dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
			        this.dateTimeArray = dateArr
			      }
			    },
			    /**
			     * 结束时间面板滑动方法
			     */
			    changeDateTimeColumn1(e) {
			      if (e.detail.column == 1) {
			        let arr1 = this.dateTime1
			        let  dateArr1 = this.dateTimeArray1
			        arr1[e.detail.column] = e.detail.value
			        dateArr1[2] = dateTimePicker.getMonthDay(dateArr1[0][arr1[0]], dateArr1[1][arr1[1]]);
			        this.dateTimeArray1 = dateArr1
			      }
			    },
			  
			    /**
			     * 获取公出时长
			     */
			    verifyStartTimeFunc(start, end) {
			      let _that = this
				  _that.om.request('wxWorkoffice/verifyStartTime',{
					  startTime: start,
					  endTime: end
				  }).then(res=>{
						let msg = res.msg;
						if (msg) {
							_that.om.toast(ignoreHtml(msg))
						}
					})
			    },
			 /**
			   * 交通工具
			   */
			  vehicleFunc(e) {
				  this.vehicleIndex = e.target.value;
				  this.setVehicleValue()
			  },
			  setVehicleValue(){
				  this.formdata.vehicleCode = this.vehicleCodes[this.vehicleIndex]
				  this.formdata.vehicleName = this.vehicleNames[this.vehicleIndex]
			  },
			formSubmit:function(formdata) {
				//表单规则
				let rules = [{
					name: "addressId",
					rule: ["required"], 
					msg: ["请选择公出地点"]
				}, {
					name: "startTime",
					rule: ["required"],
					msg: ["请选择公出开始时间"]
				}, {
					name: "endTime",
					rule: ["required"],
					msg: ["请选择公出结束时间"]
				}, {
					name: "vehicleCode",
					rule: ["required"],
					msg: ["请选择交通工具"]
				}, {
					name: "reason",
					rule: ["required"],
					msg: ["请输入公出事由"]
				}];
			  let _that = this;
			  if(!formdata || Object.keys(formdata).length==0){
			  	formdata = _that.formdata
			  }
			  if(!formdata.userinfoId){
				  _that.om.toast('在线状态异常，请重新登录')
				  return
			  }
			  let checkRes = form.validation(formdata, rules);
			  if (!checkRes) {
			  	_that.om.formSave('wxWorkoffice/save',{
			  					  userinfoId:formdata.userinfoId,
			  					  objStr:JSON.stringify([formdata])
			  	},_that)
			  } else {
			  	_that.om.toast(checkRes);
			  }
			  
			}
		},
		onLoad(options) {
			let _that = this;
			_that.menuName = options.title || "公出"
			uni.setNavigationBarTitle({
			  title: _that.menuName
			})
			_that.formdata.userinfoId = this.userId
			_that.om.request('wxWorkoffice/getConst').then(res=>{
				_that.busCode = res.value.busCode || "HRS1203";
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker.dateTimePicker(_that.startYear, _that.endYear, '', res.value.x1);
				let obj1 = dateTimePicker.dateTimePicker(_that.startYear, _that.endYear, '', res.value.x1);
				// 精确到分的处理，将数组的秒去掉
				obj.dateTime.pop();
				obj.dateTimeArray.pop();
				obj1.dateTime.pop();
				obj1.dateTimeArray.pop();
				_that.dateTime = obj.dateTime
				  _that.dateTimeArray = obj.dateTimeArray
				  _that.dateTime1 = obj1.dateTime
				  _that.dateTimeArray1 = obj1.dateTimeArray
			})
			_that.om.request('wxWorkoffice/getVehicleCombox').then(res=>{
				let vehicleNames = []
				 let vehicleCodes = []
				res.forEach((e, index) => {
				    vehicleNames.push(e.dicname)
				    vehicleCodes.push(e.code)
				  })
				_that.vehicleNames = vehicleNames
				_that.vehicleCodes = vehicleCodes
				_that.vehicleIndex = 0
				_that.setVehicleValue()
			})
		},
		onShow: function() {
		    let _that = this
		    uni.getStorage({
		      key: 'addr-cache',
		      success: function(res) {
		        _that.formdata.addressName = res.data.name
		          _that.formdata.addressId = res.data.id
		        uni.removeStorage({
		          key: 'addr-cache'
		        })
		      }
		    })
		  }
	}
</script>

<style>

</style>
